<template>
    <div style="background-color:yellow">
        我是新的父组件
        <h1>我是父组件，这个底色都是我，其他颜色的都是我的子组件</h1>
        <h2>1.注册局部组件</h2>
        <h4>注册主键第三步，在网页中展示</h4>
        <ButtonCounter/>
        <h2>2.使用kebab-case注册组件</h2>
        <button-counter></button-counter>
        <h3>同一个组件被多次调用时，各自的数据是独立的</h3>
        <h2>3.注册全局组件</h2>
        <DoubleCounter></DoubleCounter>
        <h2>4.组件可以按需重复调用</h2>
        <HelloView name="张三"/>
        <HelloView name="张四"/>
        <HelloView name="张五"/>
        <HelloView name="张六"/>
        <HelloView name="张七"/>
        <h2>5.动态组件</h2>
        <h3>使用components实现动态组件，它允许开发人员在不同场景下灵活地渲染不同的组件，具体应用场景，查阅教程项目四任务二</h3>
        <input type="radio" value="WeiXin" v-model="dengLu">微信登录
        <input type="radio" value="Phone" v-model="dengLu">手机登录
        <component :is="dengLu"></component>
        <h2>6.带缓存的导航主键</h2>
        <button @click="currentTab='TDao1'">冰淇淋</button>
        <button @click="currentTab='TDao2'">蛋糕</button>
        <button @click="currentTab='TDao3'">糖果</button>
        <!-- keep-alive表示可以缓存组件的状态 -->
         <keep-alive>
                <component :is="currentTab"></component>
         </keep-alive>
         <h2>7.异步组件：可以保证系统的稳定性和响应</h2>
         <h3>suspense内置组件，用来协调处理组件树种嵌套的异步依赖
            他有两个插槽：一个是default插槽，一个是fallback插槽。
            default插槽中的内容是当前该插槽中的组件可以显示的就显示，
            不能显示的话就显示fallback中的内容。
         </h3>
         <Suspense>
                <template v-slot:default>
                    <div>
                        <!-- 这里的组件是我们要显示的正常组件，如果因为网络
                         等原因无法加载，就显示fallback里面的内容 -->
                        <DelayConn/>
                    </div>
                </template>
                <template v-slot:fallback>
                    <div>
                        Loading...
                    </div>
                </template>
         </Suspense>
         <h2>8.props实现父组件向子组件通信，通过$emit实现子组件向父组件传递</h2>
         <SonOne toSon="你有没有在学前端" @score="handle"></SonOne>
         <h3>注意：无论数据还是何种形式，传递的都是字符串，我们可以使用v-bind来动态绑定属性，实现用变量
            来传递数据
         </h3>
         <h2>9.props对象用法</h2>
         <h3>可以为组件的props指定验证要求，
            例如指定数据类型，如果传递的数据类型不符合要求，会发出警告

         </h3>
         <SonTwo :name="name" :age="age" :sex="sex" :hobby="hobby"></SonTwo>
         <h2>10.props数据是单向的</h2>
         <h3>父组件的数据有可能也会传递给其他子组件，如果
            被其中一个子组件修改了数据，则会影响其他子组件
         </h3>
         <h3>如果子组件想要在自己的作用域里面修改父组件传递过来的数据，就要在子组件
            data中另外定义一个变量，引用父组件传递过来的props值
         </h3>
         给孩子一个大大的巴掌<SonOne :wid='wid'></SonOne>
         <h2>11.通过$ref实现父组件与子组件的通讯</h2>
         <h3>$ref是vue提供的一个内置对象，拥有已使用ref属性并成功注册的所有元素和组件
            通过$ref可以直接访问DOM元素或者子组件实例，实现父子巨剑进行通信
         </h3>
         <button @click="sendMessage()">再和孩子说一句话</button>
         <SonOne ref="childRef"></SonOne>
         <br>
    </div>
</template>
<script>
//添加组件第一步，导入组件
import ButtonCounter from '../components/ButtonCounter'
import HelloView from '../components/HelloView'
import WeiXin from '../components/WeiXin'
import Phone from '../components/Phone'
import TDao1 from '../components/TDao/TDao1'
import TDao2 from '../components/TDao/TDao2'
import DelayConn from "../components/DelayConn";
import SonOne from '../components/SonOne'
import SonTwo from '../components/SonTwo'
export default {
    //添加组件第二步，注册主键
    components:{
        ButtonCounter,
        HelloView,
        WeiXin,
        Phone,
        TDao1,
        TDao2,
        DelayConn,
        SonOne,
        SonTwo
    },
    data() {
        return {
            dengLu:'',
            currentTab:'',
            name:'李四',
            age:19,
            sex:"女",
            hobby:['吃饭','睡觉','打游戏'],
            wid:200
        }
    },
    methods: {
        sendMessage(){
            this.$refs.childRef.receiveMessage("good boy")
        },
        handle(val){
            alert('考了'+val+',not bad')
        }
    },
}

</script>